import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/base/radio_page.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

import '../../utils/widget_state_property.dart';

class CheckboxPage extends PageWithTitle {
  const CheckboxPage({super.key}) : super("复选框(Checkbox、CheckboxListTile)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("复选框一般用于同时选择多个选项的应用场景，但因为它通常默认是打勾选中的样式，也"
          "常用于用户协议勾选、或者表示同意的场景。复选框还常用于多级菜单选择，它具备中间态（不"
          "确定状态、三态）用于表达未全选子菜单"),
      AppSpacer.large,
      _Example(),
      UlItem("Checkbox"),
      PrimaryHeaderLabelText(
        "value",
        "当前复选框是否处于选中状态，开发者自己判断其对应的数值是否已经记录在选中集合中",
      ),
      PrimaryHeaderLabelText(
        "tristate",
        "当前复选框是否支持三态，默认为false，value不能为空，若设置为true value设置为空表示"
            "中间态",
      ),
      PrimaryHeaderLabelText(
        "onChanged",
        "监听状态改变，接收当前复选框选中状态，若为null表示处于中间态",
      ),
      PrimaryHeaderLabelText(
        "fillColor",
        "组件状态颜色>",
        "构建时指定的状态颜色activeColor、focusColor、hoverColor>",
        "主题配置checkboxTheme.fillColor>",
        "colorScheme.secondary +theme.unselectedWidgetColor",
      ),
      PrimaryHeaderLabelText(
        "checkColor",
        "激活(选中)状态勾选图标的颜色",
      ),
      PrimaryHeaderLabelText(
        "activeColor",
        "激活(选中)状态颜色",
      ),
      PrimaryHeaderLabelText(
        "focusColor",
        "取得焦点状态颜色",
      ),
      PrimaryHeaderLabelText(
        "hoverColor",
        "鼠标悬停状态颜色",
      ),
      PrimaryHeaderLabelText(
        "overlayColor",
        "按压图层颜色>",
        "当前按钮显式配置的颜色（activeColor、focusColor、hoverColor）+透明度"
            "(kRadialReactionAlpha)>",
        "主题配置checkboxTheme.overlayColor>",
        "默认colorScheme.secondary+透明度(kRadialReactionAlpha)",
      ),
      PrimaryHeaderLabelText(
        "splashRadius",
        "按压图层半径",
      ),
      PrimaryHeaderLabelText(
          "materialTapTargetSize",
          "组件尺寸枚举，遵循Material设计，提供了shrinkWrap(不显著影响交互下的最小尺寸)、"
              "padded(便于点击的至少48x48的尺寸)两个选项>",
          "主题配置checkboxTheme.materialTapTargetSize>",
          "全局主题配置theme.materialTapTargetSize（默认移动端padded，桌面端shrinkWrap）"),
      PrimaryHeaderLabelText(
        "side",
        "未选中状态下的边框，默认线宽2>",
        "主题配置checkboxTheme.side",
      ),
      PrimaryHeaderLabelText(
        "isError",
        "设置当前组件是否处于error状态，如果有这种需求，fillColor应该配置error状态下的样式",
      ),
      AppSpacer.large,
      _CheckboxListTileExample(),
      AppSpacer.mini,
      UlItem("CheckboxListTile"),
      BodyText("它与RadioListTile一样，集合ListTile封装成一个带文本描述的复选框组件，扩"
          "展出的属性也与其基本一样，用于配置ListTile的样式和内容，这里不重复描述了，参考"),
      PageLink(RadioPage()),
      NoticeText("android平台上radio按钮默认在左边，checkbox按钮默认在右边的吗？好像合理"
          "又好像不统一有点维和"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final Set<int> selectedValue = {0};
    return StatefulBuilder(builder: (context, setState) {
      return Wrap(
        children: List.generate(3, (index) {
          return Checkbox(
            value: selectedValue.contains(index),
            onChanged: (selected) {
              setState(() {
                if (selected == true) {
                  selectedValue.add(index);
                } else {
                  selectedValue.remove(index);
                }
              });
            },
            fillColor: WidgetStatePropertySingle(
              selected: switch (index) {
                0 => Colors.red,
                1 => Colors.green,
                _ => Colors.blue,
              },
            ),
            activeColor: theme.colorScheme.secondary,
            overlayColor: WidgetStatePropertySingle(
              selected: switch (index) {
                0 => Colors.red,
                1 => Colors.green,
                _ => Colors.blue,
              }
                  .withAlpha(kRadialReactionAlpha),
            ),
            splashRadius: 40,
            side: BorderSide(
                color: switch (index) {
                  0 => Colors.red,
                  1 => Colors.green,
                  _ => Colors.blue,
                },
                width: 2),
          );
        }),
      );
    });
  }
}

class _CheckboxListTileExample extends StatelessWidget {
  const _CheckboxListTileExample();

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final Set<int> selectedValue = {0};
    return StatefulBuilder(builder: (context, setState) {
      return Wrap(
        runSpacing: 5,
        children: List.generate(3, (index) {
          return CheckboxListTile(
            value: selectedValue.contains(index),
            onChanged: (selected) {
              setState(() {
                if (selected == true) {
                  selectedValue.add(index);
                } else {
                  selectedValue.remove(index);
                }
              });
            },
            fillColor: WidgetStatePropertySingle(
                selected: switch (index) {
                  0 => Colors.red,
                  1 => Colors.green,
                  _ => Colors.blue,
                }),
            activeColor: switch (index) {
              0 => Colors.red,
              1 => Colors.green,
              _ => Colors.blue,
            },
            title: Text(switch (index) {
              0 => "red",
              1 => "green",
              _ => "blue",
            }),
            subtitle: const Text("subtitle"),
            secondary: const Text("secondary"),
            isThreeLine: true,
            dense: true,
            controlAffinity: ListTileControlAffinity.platform,
            contentPadding:
            const EdgeInsetsDirectional.symmetric(horizontal: 20),
            tileColor: switch (index) {
              0 => Colors.red,
              1 => Colors.green,
              _ => Colors.blue,
            },
            selected: selectedValue.contains(index),
            selectedTileColor: theme.colorScheme.surfaceContainer,
            enableFeedback: true,
          );
        }),
      );
    });
  }
}
